<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>编辑器</title>
		
		<link rel="stylesheet" href="../plugings/layui/css/layui.css" />
		
		<style>
			.noThing {
				width: 100%;
				height: 100%;
				position: fixed;
				font-size: 40px;
				color: #353131;
				text-align: center;
				line-height: 930px;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			
			.editor{
				width: 100%;
				height: 97%;
				position: fixed;
			}
			
			.layui-tab {
				margin: 0;
			}
			
			.layui-tab-title {
				height: 30px;
				background-color: #F0F6E4;
			}
			
			.layui-tab-content {
				padding: 0;
			}
			
			.layui-tab-title li {
				line-height: 30px;
			}
			
			.layui-this {
				background-color: #d8dad3;
			}
		</style>
	</head>
	
	<body style="margin: 0;">
		<div class="layui-tab" lay-filter="fileTab" lay-allowclose="true">
			<ul class="layui-tab-title"></ul>
			<div class="layui-tab-content"></div>
		</div>
		<div id="noThing" class="noThing">
			No Open Files
		</div>
	</body>
	
	<script type="text/javascript" src="../plugings/ace-editor/ace.js" ></script>
	<script type="text/javascript" src="../plugings/ace-editor/ext-language_tools.js" ></script>
	<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../plugings/layui/layui.all.js"></script>
	
	<script type="text/javascript" src="../config/config-editor.js"></script>
	<script type="text/javascript" src="../js/main/zfsn.js"></script>
	<script type="text/javascript" src="../js/main/zfsn-editor.js"></script>
	
	<script>
		var tabArr = [];
		var editorArr = [];
		var editor;
		var active;
		$(document).ready(function() {
			layui.use('element', function(){
				var $ = layui.jquery,element = layui.element;
				// 触发事件
				active = {
					tabAdd: function(tabName, tabId, content) {
						var id = 'editor_' + tabId;
						
						// 判断是否已经存在该tab
						if (tabArr.indexOf(id) == -1) {
							// 新增一个Tab项
							element.tabAdd('fileTab', {
								title: tabName,
								content: '<div id="' + id + '" class="editor"></div>',
								id: id
							})
							
							// 显示加载层
							var loadIndex = parent.EDITOR._base.body_frame.layer.load(2);
							
							// 初始化编辑器
							editor = parent.EDITOR._init_editor(id, ace, editorSetting);
							
							// 加载数据
							if (!content) {
								setTimeout(function() {
									editor.setValue("Hello World!");
									// 关闭加载层
									parent.EDITOR._base.body_frame.layer.close(loadIndex);
								}, 500);
							} else {
								editor.setValue(content);
								// 关闭加载层
								parent.EDITOR._base.body_frame.layer.close(loadIndex);
							}
							
							// 将tab的id、编辑器对象push到数组
							tabArr.push(id);
							editorArr.push(editor);
							
							// 监听tab的关闭
							$('[lay-id=' + id + ']').children(":first").on("click",function(e){
								if($(e.target).is(".layui-tab-close")){
									var deleteId = $(e.target).parent().attr("lay-id");
									var index = tabArr.deleteOne(deleteId);
									editorArr.deleteOneByIndex(index);
								}
								if (tabArr.length == 0) {
									$('#noThing').css('display', '');
									editor = undefined;
								}
							});
						}
						
						// 跳转到改tab页
						this.tabChange(id);
						$('#noThing').css('display', 'none');
					},
					tabChange: function(id) {
						// 切换到指定Tab项
						element.tabChange('fileTab', id);
					}
				};
				
				// 监听tab切换事件
				element.on('tab(fileTab)', function(data){
					editor = editorArr[data.index];
				});
			});
		});
	</script>
	
</html>
